<template>
  <div>
    <div>class与style绑定</div>

    <div>------------------------------------------</div>
    <!-- class第一种绑定方式 -->
    <div v-bind:class="{'active':isActive , 'text-danger':hasError}">class1</div>

    <div>------------------------------------------</div>
    <!-- class第二种绑定方式 -->
    <div :class="classObject">class2</div>

    <div>------------------------------------------</div>
    <!-- class第三种绑定方式 -->
    <div :class="['actvie','text-danger']">class3</div>
    <div>------------------------------------------</div>

    <!-- style原始写法 -->
    <div style="color:red; fontSize:36px">style</div>
    <div>------------------------------------------</div>

    <!-- style 第一种绑定方式 -->
    <div :style="{ 'color': activeColor, 'fontSize': fontSize + 'px'}">style1</div>
    <div>------------------------------------------</div>

    <!-- style 第二种绑定方式 -->
    <div :style="styleObjject">style2</div>
    <div>------------------------------------------</div>

    <!-- style 第三种绑定方式 -->
    <div :style="[baseStyles, overridingStyles]">style3</div>
    <div>------------------------------------------</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // class 第一种
      isActive: true,
      hasError: false,
      // class 第二种
      classObject: {
        active: true,
        "text-danger": false
      },
      // class 第三种
      activeClass: "active",
      errorClass: "text-danger",

      // style 第一种
      activeColor: "black",
      fontSize: 30,
      // style 第二种
      styleObjject: {
        color: "yellow",
        fontSize: "30px"
      },
      baseStyles: {
        color: "blue"
      },
      overridingStyles: {
        fontSize: "40px"
      }
    };
  }
};
</script>











